import {Layout} from "antd";
import Navs from "../Navs";
import CustomHeader from "../Header";

const {
    Footer,
    Sider,
    Content
} = Layout;

const Container = (props) => {
    return (
        <Layout style={{
            overflow: 'hidden',
            width: '100vw',
            height: '100vh'
        }}>
            <CustomHeader/>
            <Layout>
                <Sider width="20%" style={{
                    lineHeight: '120px',
                    color: 'black',
                    overflowY: 'auto',
                    margin: '10px 0 10px 10px',
                    backgroundColor: "#fff"
                }}>
                    <Navs/>
                </Sider>
                <Content style={{
                    alignItems: 'center',
                    minHeight: 120,
                    padding: '10px 10px',
                }}>
                    {props.content}
                </Content>
            </Layout>
            <Footer style={{
                textAlign: 'center',
                backgroundColor: "#fff"
            }}>Footer</Footer>
        </Layout>
    );
}

export default Container